/**
 * Created by zzc on 2017/9/13.
 */

import React,
{PureComponent} from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    PixelRatio
} from 'react-native'

import StringUtil from '../../base/util/StringUtil'

import { Actions } from 'react-native-router-flux';
import {WH500_400} from "../../base/Constants";

const color = {
    theme: '#06C1AE',
    border: '#e0e0e0',
    background: '#f3f3f3'
}

export default class FindHouseCell extends PureComponent {

    constructor(props){
        super(props)
    }

    render() {
        let {info} = this.props;
        let indexImage = info.indexImg+WH500_400;
        let title = info.rentType == 'SHARE'?info.premName + " · " + info.roomNum+ " · "+info.size:info.premName;

        let shareDesc = info.rooms + "室" + info.hall+"厅"+info.toilet+"卫"+" | "+
            this._filterNull(info.totalSize)+this._filterNull(info.direction)+info.fitmenType;
        let totalDesc = info.room + "室" + info.hall+"厅"+info.toilet+"卫"+" | "+
            this._filterNull(info.totalSize)+this._filterNull(info.direction)+info.fitmenType;
        let desc = info.rentType == "SHARE"?shareDesc:totalDesc;
        let tagOne = info.rentType == 'SHARE'?'合租':'整租';
        let tagTwo = '';
        if(info.apartmentType == 'MANAGE'){
            tagTwo = '服务公寓';
        }else if(info.apartmentType == 'BRAND'){
            tagTwo = '品牌公寓'
        }else{
            tagTwo = '';
        }
        let districtName = StringUtil.filtNull(info.districtName)+'/'+StringUtil.filtNull(info.bizCircleName);
        return (
            <TouchableOpacity style={styles.container} onPress={() => Actions.houseDetail({ houseID: info.id,isShare:info.rentType})}>
                <Image source={{uri: indexImage}} style={styles.icon} />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.desc}>{desc}</Text>
                    <Text style={styles.price}>{info.price}<Text style={styles.h3s}>元/月</Text></Text>
                    <View style={{flex: 1, flexDirection:'row',alignItems:'flex-end'}}>
                        <Text style={styles.tagOne}>{tagOne}</Text>
                        <Text style={styles.tagTwo}>{tagTwo}</Text>
                        <View style={{flex:1,alignItems:'flex-end'}}>
                            <Text style={styles.h2}>{districtName}</Text>
                        </View>
                    </View>

                </View>
            </TouchableOpacity>
        )
    }

    _filterNull(data){
        return StringUtil.isEmpty(data)?" ":data+" | ";
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        padding: 10,
        borderBottomWidth: 1 / PixelRatio.get(),
        borderColor: color.border,
        backgroundColor: 'white',
    },
    icon: {
        width: 110,
        height: 80,
    },
    rightContainer: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    title: {
        fontSize: 15,
        color: 'black',
    },
    desc: {
        fontSize:12,
        color:'#8F8E94',
        marginTop:5
    },
    price: {
        fontSize:15,
        color:'#FF3366',
        marginTop:5
    },
    h3s: {
        fontSize:10,
        color:'#FF3366',
    },
    tagOne: {
        fontSize: 10,
        color: '#33CFD9',
        borderWidth:1,
        borderColor:'#33CFD9',
        borderRadius:2,
        paddingLeft:2,
        paddingRight:2,
        textAlign:'center'
    },
    tagTwo: {
        fontSize: 10,
        marginLeft:3,
        color: '#FDB73C',
        borderRadius:2,
        borderWidth:1,
        borderColor:'#FDB73C',
        paddingLeft:2,
        paddingRight:2,
        textAlign:'center'
    },
})